<template>
  <div class="article">
    <el-card>
      <topcard>发布文章</topcard>
      <el-form :model="form" label-width="80px" ref="form" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <quillEditor
            class="editor"
            v-model="form.content"
            @change="editorChange"
            :options="editorOption"
          ></quillEditor>
        </el-form-item>
        <el-form-item label="封面">
          <el-radio-group @change="togger" v-model="form.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- upload组件 -->
        <!-- <el-form-item>
          <template v-if="form.cover.type === 1">
            <div class="avatar-uploader" @click="uploading(0)">
              <img
                v-if="form.cover.images[0] === undefined"
                class="upImg"
                :src="image"
                alt=""
              />
              <img v-else class="upImg" :src="form.cover.images[0]" alt="" />
            </div>
          </template>
          <template v-else-if="form.cover.type === 3">
            <div
              v-for="(item, index) in items"
              :key="index"
              class="avatar-uploader"
              @click="uploading(index)"
            >
              <img
                v-if="form.cover.images[index] === undefined"
                class="upImg"
                :src="image"
                alt=""
              />
              <img
                v-else
                class="upImg"
                :src="form.cover.images[index]"
                alt=""
              />
            </div>
          </template>
          <template v-else> </template>
        </el-form-item> -->
        <el-form-item>
          <images :cover="form.cover" @father="upLoading"></images>
        </el-form-item>
        <el-form-item label="频道">
          <el-select v-model="form.channel_id" placeholder="请选择频道">
            <el-option
              v-for="(item, index) in channel"
              :key="index"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button ref="primary" type="primary" @click="submit"
            >发表</el-button
          >
          <el-button @click="subDraft">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- <upload ref="upload" @father="getUrl"></upload> -->
  </div>
</template>
<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import images from '@/views/sendArticle/images.vue'
// api接口
import { getChannel, addArticles } from '@/api/sendArticle.js'
export default {
  components: {
    quillEditor,
    // upload,
    images
  },
  data () {
    return {
      channel: '',
      draft: false,
      idx: '',
      image:
        '',
      items: [1, 2, 3],
      form: {
        // 标题
        title: '',
        // 内容区域
        content: '',
        // 图片
        cover: { type: 0, images: [] },
        // 频道标记id
        channel_id: ''
        // 接收图片传过来的url
        // imagesUrl: ''
      },
      rules: {
        title: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 5, max: 30, message: '输入5-30个文本', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 20, message: '至少输入20个文本', trigger: 'blur' }
        ]
      },
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            // [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ indent: '-1' }, { indent: '+1' }],
            // [{ 'direction': 'rtl' }],
            // [{ 'size': ['small', false, 'large', 'huge'] }],
            // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            // [{ 'color': [] }, { 'background': [] }],
            // [{ 'font': [] }],
            // [{ 'align': [] }],
            // ['clean'],
            ['image']
          ]
        }
      }
    }
  },
  async created () {
    // 发表文章或者编辑文章
    const res = await getChannel()
    window.console.log(res)
    this.channel = res.data.channels
  },
  methods: {
    editorChange (val) {
      // window.console.log(val)
      this.$refs.form.validateField(['content'])
    },
    // 表单验证和发表文章
    submit () {
      // 表单验证
      this.$refs.form.validate(async val => {
        if (val) {
          // 发表
          const res = await addArticles(
            {
              ...this.form
            },
            { draft: this.draft }
          )
          window.console.log(res)
          this.$message.success('发布成功')
          this.$refs.form.resetFields()
        } else {
          this.$message.error('失败')
        }
      })
    },
    // 存入草稿
    subDraft () {
      // 存入草稿
      // 表单验证
      this.$refs.form.validate(async val => {
        if (val) {
          // 草稿
          this.draft = true
          const res = await addArticles(
            {
              ...this.form
            },
            {
              draft: this.draft
            }
          )
          window.console.log(res)
          this.$message.success('存为草稿')
          this.$refs.form.resetFields()
        } else {
          this.$message.error('失败')
        }
      })
    },
    // 点击上传框弹出弹出层
    // uploading (index) {
    //   this.$refs.upload.dialogVisible = true
    //   window.console.log('item', index)
    //   this.idx = index
    //   window.console.log('点击图片了')
    //   // 点击了哪个就换哪张图片
    //   this.$emit('uploading', index)
    // },
    // 获取子组件的url
    upLoading (imgUrl) {
      //  如果是type是1 者push一次后就更换
      // window.console.log(imgUrl)
      this.form.cover.images.push(imgUrl)
      // this.form.cover.images.forEach((item, index) => {
      //   if (index !== this.idx) {
      //     item.push(imgUrl)
      //   } else {
      //     item[index] = imgUrl
      //   }
      // })
      // if (this.form.cover.images.length !== this.idx) {
      //   window.console.log('嗯嗯', this.form.cover.images.length)
      //   window.console.log('idx', this.idx)
      // } else {
      //   window.console.log('haha ')
      //   this.form.cover.images[this.idx - 1] = imgUrl
      // }
      // window.console.log(this.form.cover.images.push())
      // window.console.log(this.form.cover.images[this.index])
    },
    // select 切换事件
    togger (val) {
      window.console.log('toggle', val)
      // this.form.cover.images = []
    }
  }
}
</script>
<style lang="less">
.article {
  // height: 95%;
  .editor {
    .ql-toolbar.ql-snow {
      padding: 0 8px;
    }

    .ql-editor {
      min-height: 400px;
    }
  }
  .el-form-item__content {
    .avatar-uploader {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      // cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 178px;
      height: 178px;
      display: inline-block;
      .upImg {
        width: 100%;
      }
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
  }
}
</style>
